﻿<!DOCTYPE html>
<html id="home" lang="en">

<head>
    <title>How to share audio-only streams using RTCWeb APIs? | Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
        <style>
            p { padding: .8em; }

            li {
                border-bottom: 1px solid rgb(189, 189, 189);
                border-left: 1px solid rgb(189, 189, 189);
                padding: .5em;
            }

            td {
                border: 0;
                padding: 0;
            }
        </style>
    <!-- for HTML5 el styling -->
    <script>
        document.createElement('article');
        document.createElement('footer');
    </script>
</head>

<body>
    <article>
        <header style="text-align: center;">
                <h1>
                    How to share audio-only streams using RTCWeb APIs?
                </h1>
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                        
                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                        
                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                        
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                        
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
                </p>
            </header>

        <blockquote style="background: #f3b7b7;border: 5px solid black;border-radius: 5px;">
                This tutorial is <span style="border: 1px dotted red; background: yellow; padding: 2px 5px;">out-dated (written in 2013)</span>. Please check this tutorial instead: <a href="https://codelabs.developers.google.com/codelabs/webrtc-web/#0">https://codelabs.developers.google.com/codelabs/webrtc-web/#0</a>
        </blockquote>

        <table style="width: 100%;">
            <tr>
                <td>If you're newcomer, newbie or beginner; you're suggested to try <a href="http://bit.ly/RTCMultiConnection-Documentation" target="_blank">RTCMultiConnection.js</a> or <a href="http://bit.ly/DataChannel-Documentation" target="_blank">DataChannel.js</a> libraries.
                </td>
            </tr>
        </table>

        <h2>This document is for old chrome releases.</h2>

        <table style="width: 100%;">

            <tr>
                <td>On getting local/remote media stream; you should use something like this:
                </td>
            </tr>

            <tr>
                <td>
                    <pre>
audio.src = webkitURL.createObjectURL(stream);
audio.addEventListener('<strong>play</strong>', function () {
    this.<strong>muted</strong> = <strong>false</strong>;
    this.<strong>volume</strong> = <strong>1</strong>;
}, false);
audio.play();
</pre>
                </td>
            </tr>

            <tr>
                <td>This is JUST a simple (temporary) workaround.
                </td>
            </tr>

            <tr>
                <td>Most importantly, you need to enable "<code><strong>Web Audio Input</strong></code>" flag via "<code><strong>chrome://flags</strong></code>".
                </td>
            </tr>

            <tr>
                <td>
                    <img src="/images/audio-only-experiment.png" alt="Enable Web Audio Input flag" style="width: 100%;" />
                </td>
            </tr>
        </table>

        <section style="border: 1px solid rgb(189, 189, 189); margin: 1em 3em; border-radius: .2em;">
                <h2 id="feedback" style="padding: .2em .4em; border-bottom: 1px solid rgb(189, 189, 189);">Feedback</h2>
                <div>
                    <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left:1em;">Enter your email too; if you want "direct" reply!</small>
            </section>
    </article>
    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a>©
                <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>, <span>2013 </span>»
                <a href="mailto:muazkh@gmail.com" target="_blank">Email</a>»
                <a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>»
                <a href="https://github.com/muaz-khan" target="_blank">Github</a>
        </p>
    </footer>
    <script src="https://cdn.webrtc-experiment.com/common.js"> </script>
</body>
</html>
